<template>
    <div id="category">
        <van-row gutter="20">
            <van-col span="8">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item title="空调" dot/>
                    <van-sidebar-item title="电动窗帘" />
                    <van-sidebar-item title="电动机柜" />
                    <van-sidebar-item title="会议设备" />
                    <van-sidebar-item title="空气系统" />
                    <van-sidebar-item title="投影仪" />
                    <van-sidebar-item title="影库播放" />
                    <van-sidebar-item title="智能控制" />
                </van-sidebar>
            </van-col>
            <van-col span="16">
                <van-grid square :gutter="20" :border="true"
                          :column-num="3"
                          icon-size="80">
                    <van-grid-item text="空调">
                        <van-image  src="https://img.yzcdn.cn/vant/apple-1.jpg" />
                    </van-grid-item>
                    <van-grid-item text="空调">
                        <van-image  src="https://img.yzcdn.cn/vant/apple-2.jpg" />
                    </van-grid-item >
                    <van-grid-item text="空调">
                        <van-image  src="https://img.yzcdn.cn/vant/apple-3.jpg" />
                    </van-grid-item>
                </van-grid>
            </van-col>
        </van-row>
    </div>
</template>

<script>
    import { Col, Row,Sidebar, SidebarItem,Grid, GridItem,Image } from 'vant';
    export default {
        components: {
            [Col.name]: Col,
            [Grid.name]: Grid,
            [GridItem.name]: GridItem,
            [Row.name]: Row,
            [Sidebar.name]: Sidebar,
            [SidebarItem.name]: SidebarItem,
            [Image.name]: Image,
        },
        name: "index.vue",
        data(){
            return {
                activeKey:0
            }
        },
        methods: {

        }
    }
</script>

<style scoped>

</style>